<!-- 企业审批历史 -->
<template>
    <h2>企业审批历史</h2>
    <div  style="display: flex;justify-content: ;">
      <!-- 下拉选择 -->
      <el-select v-model="value1" filterable placeholder="审批状态" style="margin-left: 10px" @change="change">
        <el-option v-for="item in tableopition2" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select  v-model="value2" filterable placeholder="审批类型" style="margin-left: 15px" @change="change">
        <el-option v-for="item in tableopition4" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="value3" filterable  placeholder="所属市区" style="margin-left: 15px" @change="change">
        <el-option v-for="item in tableopition1" :key="item" :label="item"  :value="item" />
      </el-select>
      <el-select  v-model="value4" filterable placeholder="处理单位" style="margin-left: 15px" @change="change">
        <el-option v-for="item in tableopition3" :key="item" :label="item" :value="item"/>
      </el-select>
      <el-select v-model="value5" filterable  placeholder="时限" style="margin-left: 15px;margin-right:5%;" @change="change">
        <el-option v-for="item in tableopition5" :key="item" :label="item"  :value="item" />
      </el-select>
      <div class="demo-date-picker" >
      <div class="block">
     <!--  <span class="demonstration" style="color: rgb(168,191,208);"> 选择审批日期:&nbsp; &nbsp; &nbsp; </span> -->
      <el-date-picker
        v-model="datavalue"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
        :size="size"
        @change="change"
      />
      </div>
      </div>
    </div>

    
     <!-- 搜索栏 -->
    <div style="margin-top: 30px; margin-left: 10px">
      <div>
        <el-input v-model="input" placeholder="" style="width: 30%" />
        <el-button @click="seacrhs"  round   style="border-radius: 0;background-color: rgb(22, 155, 213);color: white;">搜索</el-button>
      </div>
      <div id="maxbox" ref="myRef"> <!-- 自定义列表 -->
      <div >
         <span @click="clickplay()">自定义列表</span> 
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>审批主题</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>企业名称</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>审批类型</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>审批状态</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>审批单位</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>提交时间</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="cszt" />
          <label>超时状态</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="ssqs"/>
          <label>所属区市</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="spsj"/>
          <label>审批时间</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="tbr"/>
          <label>提报人</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="tbrzw" />
          <label>提报人职务</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="tbrsj"/>
          <label>提报人手机</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="gddh"/>
          <label>固定电话</label>
        </div>
      </div>
    </div>
  
      <el-button  id="maxbox2"  @click="exportData" type="success" style="background-color: rgb(22, 155, 213)" >
       
        <a href="http://172.16.123.189:8080/approval_checklist/exportApprovalHistory" style="background-color: rgb(22, 155, 213);text-decoration:none;color: white;">导出数据</a>
      </el-button>
    </div>
   <!-- 表单 -->
    <div id="maxbox3" style="margin-top: 30px">
     
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed="left" prop="id" label="序号" width="60" />
      <el-table-column prop="approvalSubject" label="审批主题" width="320" />
      <el-table-column prop="name" label="企业名称" width="160" />
      <el-table-column prop="approvalType" label="审批类型" width="160" />
      <el-table-column prop="approvalStatus" label="审批状态" width="160" />
      <el-table-column prop="timeoutStatus" label="超时状态" v-if="t" width="160" />
      <el-table-column prop="region" label="所属区市" v-if="s" width="160" />
      <el-table-column prop="approvalUnit" label="审批单位"  width="160" />
      <el-table-column prop="updatetime" label="提交时间" v-if="j" width="180" />
      <el-table-column prop="submissionTime" label="审批时间"  width="180" />
      <el-table-column prop="reporter" label="提报人" v-if="r" width="160" />
      <el-table-column prop="reporPhoneid" label="提报人手机" v-if="sj" width="160" />
      <el-table-column prop="reporPhoneid" label="固定电话" v-if="h" width="160" />
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page" style="display: flex;justify-content: center;">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted,} from "vue";
  import axios from 'axios'
  import { useRouter } from 'vue-router'
 const router = useRouter();
  /* value1 2 对应v-modole */
  const value1 = ref("");
  const value2 = ref("");
  const value3 = ref("");
  const value4 = ref("");
  const value5 = ref("");
  const input = ref("");
  //=====以下3个const是关于日期的
const size = ref<'default' | 'large' | 'small'>('default')
const datavalue= ref('') // 日期的ref
const shortcuts = [
  {
    text: '周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '季',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
  
  /* 导出数据 */
  const exportData = function () {
    //approval_checklist/exportApprovalHistory
    // console.log('!!!!!!!!');
    //    axios({
    //    method: 'get',
    //    url: 'http://172.16.123.189:8080/approval_checklist/exportApprovalHistory',
      
    //      }).then((res:any) => {
          
    //     })
  };
  
  /* 复选框 */
  const myRef = ref();
  let t:any=ref("true");//超时状态
  let s:any=ref("true");//所属区市
  let j:any=ref("true");//审批时间
  let r:any=ref("true");//提报人
  let h:any=ref("true");
  let sj:any=ref("true");//手机
  //clickplay 自定义列表
  const clickplay = function () {
    if (myRef.value.style.height == '36px' || myRef.value.style.height=='') {
      myRef.value.style.height = "447px"
    }else if(myRef.value.style.height = "447px"){
      myRef.value.style.height = "36px";
    } ; 
    const cszt:any=document.getElementById("cszt");
      t.value=cszt.checked;
      const tbrsj:any=document.getElementById("tbrsj");
      sj.value=tbrsj.checked;
      const spsj:any=document.getElementById("spsj");
      j.value=spsj.checked;
      const ssqs:any=document.getElementById("ssqs");
      s.value=ssqs.checked;
      const tbr:any=document.getElementById("tbr");
      r.value=tbr.checked;
      const gddh:any=document.getElementById("gddh");
      h.value=gddh.checked;
  };
  //点击查看详细发起请求
  const handleClick = (scope:any) => {
   let id=scope.row.id
   //这个查看是跳转评价详情页，所以路径没对
   router.push({path:"/evaluate",query:{id:id}})
   //seeApprovalHistory  
  
  };
  //——————————————————————————时间戳转成时间
const aaa = (aa: any) => {
 var date = new Date(aa); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
 var Y = date.getFullYear() + '/';
 var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
 var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
 var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
 var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
 var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
 return Y + M + D + h + m + s;
 }
 //--------------------------国标时间转日期
const timestampToTime=(timestamp:any)=>{
      var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = date.getDate() + ' ';
      var h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':' ;
      var m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':' ;
      var s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
      return Y+M+D+h+m+s;
}
const tableopition1:any=ref([])  //动态下拉框
const tableopition2:any=ref([])
const tableopition3:any=ref([])
const tableopition4:any=ref([])
const tableopition5:any=ref([])
const tableData:any= ref([])//主数据
// 下拉框搜索
const change=(()=>{
   
     let time= timestampToTime(datavalue.value[0])//开始日期
  let time2=timestampToTime(datavalue.value[1])//结束日期
     axios({    
       method: 'post',
       url: 'http://172.16.123.161:8080/approval_checklist/findApprovalHistoryByCondition',
       params: {
       approvalStatus:value1.value,   //审批状态
       approvalType:value2.value,  // 类型
       region:value3.value,  //所属区市
       approvalUnit:value4.value,  // 审批单位
       currentPage:1,
       pageSize :10 ,  
      starttime:time,
       endtime:time2,
      //  page:1,
      //  limit:10,   
       }
       }).then((res:any) => {
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
        }
        })
 })
//输入框搜索
const seacrhs=function(){ 
  console.log('输入框');
  
     axios({    
       method: 'post',
       url: 'http://172.16.123.161:8080/approval_checklist/selecthistoryname',
       params: {
        name:input.value,
        currentPage:1,
        pageSize:10    
       }
       }).then((res:any) => {
        console.log('222',res);
        tableData.value=res.data.data
        
      })
    }  
//onMounted 页面加载前，发起请求渲染页面数据
  onMounted(()=>{
               axios({  
                method: 'post',
                url: 'http://1.14.73.59:8080/approval_checklist/findApprovalHistory',
                params: {
                  currentPage:1,
                  pageSize:10    
                }
              }).then((res:any) => {
                console.log(res);
                
                tableData.value=res.data.data
                //这个循环是转换时间格式
                  for(let i=0;i<tableData.value.length;i++){
                  //  tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
                    tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
                    tableData.value[i].updatetime=aaa(tableData.value[0].updatetime)
                    tableopition1.value.push(tableData.value[i].region) //所属市区
                    tableopition2.value.push(tableData.value[i].approvalStatus)//审批状态
                    tableopition3.value.push(tableData.value[i].approvalUnit)//审批单位
                    tableopition4.value.push(tableData.value[i].approvalType)//审批类型
                    tableopition5.value.push(tableData.value[i].approvalType)//审批类型
                    removeDuplicate(tableopition1.value) 
                     removeDuplicate(tableopition2.value) //去重，上面const的值都已经去重了
                     removeDuplicate(tableopition3.value)
                     removeDuplicate(tableopition4.value)
                     removeDuplicate(tableopition5.value)
                     function removeDuplicate(arr:any) {
                      let len = arr.length
                     for (let i = 0; i < len; i++) {
                     for (let j = i + 1; j < len; j++) {
                        if (arr[i] === arr[j]) {
                         arr.splice(j, 1)
                           len-- // 减少循环次数提高性能
                           j-- // 保证j的值自加后不变
                        }
                       }
                      }
                       return arr
                 }
                  }
              })
        })
   
  </script>
  
  <style scoped>
  #maxbox {
    position: absolute;
    width: 124px;
    height: 36px;
    right: 600px;
    top: 130px;
    z-index: 999;
    text-align: center;
    line-height: 40px;
    background-color: rgb(22, 155, 213);
    overflow: hidden;
    transition: all 0.2s linear;
    border-radius: 3px;
  }
  #maxbox div {
    width: 123px;
    color: white;
    font-size: 14px;
  }
  #maxbox div div{
    height: 30px;
    width: 122px;
  }
  #maxbox2 {
    width: 120px;
    height: 36px;
    background-color: rgb(22, 155, 213);
    text-align: center;
    line-height: 36px;
    position: absolute;
    right: 400px;
    top: 130px;
  }
  
  /* #clickbox {
    width: 120px;
    height: 36px;
    background-color: rgb(22, 155, 213);
    text-align: center;
    line-height: 36px;
  }
  #checkbox {
    overflow: hidden;
    height: 0px;
  } */
  .selectbox {
    width: 120px;
    height: 20px;
    border: 1px solid rgb(104, 100, 100);
    background-color: rgb(124, 122, 122);
    font-size: 14px;
  }
  .selectbox input{
    margin-left: -10px;
  }
  .selectbox label{
    color:white;
    font-size: 6px;
  }
  </style>